import '../../style/home.css'
import React from 'react'
import ReactDOM from 'react-dom'
import { compose, bindActionCreators } from 'redux';
import { connect } from 'react-redux';

import RelativeView from '../common/component/RelativeView.jsx'
import HeadBar from '../common/component/HeadBar.jsx'
import * as actions from '../actions/app.js'
import { Button, Result, Icon, WhiteSpace, Menu, ActivityIndicator, NavBar, Popover } from 'antd-mobile'

class PcApp extends RelativeView {

  constructor(props) {
    super(props)
    var menu = [{
      key: 1,
      label: '自动布局',
      value: 1,
      isLeaf: false,
      children: [
        {
          key: 2,
          label: '自动单排',
          value: 2,
          isLeaf: true,
          click: () => {
            this.props.isFreeze || this.props.actions.reLayout(1, this.props)
          }
        },
        {
          key: 3,
          label: '自动双排',
          value: 3,
          isLeaf: true,
          click: () => {
            this.props.isFreeze || this.props.actions.reLayout(2, this.props)
          }
        }, {
          key: 4,
          label: '自动三排',
          value: 4,
          isLeaf: true,
          click: () => {
            this.props.isFreeze || this.props.actions.reLayout(3, this.props)
          }
        }
      ]
    },
    {
      key: 5,
      label: '退出',
      value: 5,
      isLeaf: true,
      click: () => { return this.props.history.push('/') }
    }]
    this.state = {
      isMenuActive: false, menu: menu,
      events:{
        changeLegend: (params, charts) => {
          this.props.actions.changeLegend(params.selected)
        },
        sourceFilter: (filters) => {
          this.props.actions.sourceFilter(params.selected)
        }
      }
    }
  }

  componentWillMount() {
    var userId = this.props.match.params.id
    this.props.actions.loadGraph(userId, this.props.width)
  }
  handleClick(e) {
    // e.preventDefault(); // Fix event propagation on Android
    this.setState({
      isMenuActive: !this.state.isMenuActive,
    })
  }
  onChange(value) {
    let label = '';
    var changedElement
    this.state.menu.forEach((dataItem) => {
      if (dataItem.value === value[0]) {
        label = dataItem.label;
        if (dataItem.children) {
          if (value[1]) {
            dataItem.children.forEach((cItem) => {
              if (cItem.value === value[1]) {
                label += ` ${cItem.label}`;
                cItem.click && cItem.click()
              }
            })
          } else {
            cItem.click && cItem.click()
          }
        }
      }
    })


  }

  render() {
    const loadingEl = (
      <div style={{ width: '100%', height: document.documentElement.clientHeight * 0.6, display: 'flex', justifyContent: 'center' }}>
        <ActivityIndicator size="large" />
      </div>
    )
    const menuEl = (
      <Menu
        className="foo-menu"
        data={this.state.menu}
        onChange={this.onChange.bind(this)}
        height={document.documentElement.clientHeight * 0.4}
        width={document.documentElement.clientWidth}
      />
    )
    return (
      <div>
        <div className={this.state.isMenuActive ? 'menu-active' : ''} style={{ position: 'fixed', width: document.documentElement.clientWidth, zIndex: 100 }}>
          <div>
            <HeadBar text="FOne" onClick={this.handleClick.bind(this)}></HeadBar>
          </div>
          {this.state.isMenuActive ? this.state.menu ? menuEl : loadingEl : null}
        </div>

        <div className="chartView">
          {this.packageCharsHammer()}
          { /*this.packageElementHammer(this.menu, 'Menu')*/}
        </div>
      </div>
    )
  }
}

export default compose(
  connect(
    (state) => state.app, mapDispatchToProps
  ),
)(PcApp)

function mapDispatchToProps(dispatch) {
  return {
    actions: bindActionCreators(actions, dispatch)
  }
}